<template>
  <div>
    <el-dialog v-model="dialogVisible" title="信息导入" width="35%" :before-close="handleClose">
      <div>
        <el-upload
          class="upload-demo"
          drag
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">将文件拖至此处，或点击上传</div>
          <div class="upload">
            只能上次后缀为xlsx、docx、doc、xls、jpg、png、bmp、ceb、PDF、ET、txt、zip、rar、ole、ppt、pptx、aud、wps、gd格式的文件
          </div>
          <el-button type="primary"
            ><span><em>点击上传</em></span></el-button
          >
          <template #tip>
            <div class="el-upload__tip">文件大小小于500kb的jpg/png文件</div>
          </template>
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false"> 上传导入 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { UploadFilled } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
const dialogVisible = ref(false);
const handleClose = () => {
  ElMessageBox.confirm('确定要取消上传吗？')
    .then(() => {
      dialogVisible.value = false;
    })
    .catch(() => {
      // catch error
    });
};
const init = () => {
  dialogVisible.value = true;
};
defineExpose({
  init,
});
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  margin-right: 0px !important;
  background: #f6f7fb;
  border-bottom: 1px solid #e7e9ef;
}
.upload {
  margin-bottom: 18px;
}
</style>
